<form name="loginForm" ng-submit="login(credenciales)" role="form" novalidate>
  <legend>Iniciar Sesi&oacute;n</legend>

  <div class="container-fluid" ng-show="submitted && loginForm.$invalid">
    <div class="alert alert-danger">
      <p ng-show="loginForm.nombreUsuario.$invalid">
        Debe ingresar el nombre de usuario
      </p>
      <p ng-show="loginForm.password.$invalid">
        Debe ingresar la contrase&ntilde;a
      </p>
    </div>
  </div>

  <div
    class="form-group"
    ng-class="{'has-error': loginForm.nombreUsuario.$invalid && !loginForm.nombreUsuario.$pristine && submitted}">
    <label for="nombreUsuario">Nombre de usuario</label>
    <input
      type="text"
      class="form-control"
      name="nombreUsuario"
      ng-model="credenciales.nombreUsuario"
      placeholder="Ingrese su nombre de usuario"
      required>
  </div>

  <div
    class="form-group"
    ng-class="{'has-error': loginForm.password.$invalid && !loginForm.password.$pristine && submitted}">
    <label for="password">Contrase&ntilde;a</label>
    <input
      type="password"
      class="form-control"
      name="password"
      ng-model="credenciales.password"
      placeholder="Ingrese su contrase&ntilde;a"
      required>
  </div>

  <button
    type="submit"
    class="btn btn-primary btn-lg btn-block"
    ng-click="submitted = true">
    Login
  </button>
</form>
